<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" inline>
        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model="queryParams.realName" placeholder="真实姓名" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="queryParams.phone" placeholder="手机号码" clearable @keyup.enter="handleQuery" />
        </el-form-item>

        <el-form-item label="车牌号码" prop="carNumber">
          <el-input v-model="queryParams.carNumber" placeholder="车牌号码" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="搅拌车号" prop="mixingCarCode">
          <el-input v-model="queryParams.mixingCarCode" placeholder="搅拌车号" clearable @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="司机是否在线" prop="driverIsOnline">
          <el-select v-model="queryParams.driverIsOnline" placeholder="司机是否在线" clearable>
            <el-option label="是" :value="1" />
            <el-option label="否" :value="0" />
          </el-select>
        </el-form-item>

        <el-form-item label="账号类型" prop="accountType">
          <el-select v-model="queryParams.accountType" placeholder="账号类型" clearable>
            <el-option label="司机" :value="1" />
            <el-option label="客户" :value="2" />
            <el-option label="技术员" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="启用状态" prop="enableStatus">
          <el-select v-model="queryParams.enableStatus" placeholder="启用状态" clearable>
            <el-option label="启用" :value="1" />
            <el-option label="停用" :value="0" />
          </el-select>
        </el-form-item>

        <el-form-item label="车辆所属站点" prop="carStationNumber">
          <el-select v-model="queryParams.carStationNumber" placeholder="车辆所属站点" clearable>
            <el-option v-for="item in stationList" :key="item.id" :label="item.name" :value="item.number" />
          </el-select>
        </el-form-item>

        <el-form-item label="时间区间">
          <el-select v-model="queryParams.timeType">
            <el-option label="创建时间" :value="1" />
            <el-option label="更新时间" :value="2" />
          </el-select>
          <date-picker v-model:start="queryParams.startTime" v-model:end="queryParams.endTime" class="ml-8" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleQuery">
            <template #icon><ep-Search /></template>
            搜索
          </el-button>
          <el-button @click="handleResetQuery">
            <template #icon><ep-Refresh /></template>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never">
      <el-table v-auto-h v-loading="loading" :data="tableData" border highlight-current-row>
        <el-table-column fixed="left" align="center" label="操作" width="180">
          <template #default="{ row }">
            <!-- accountType: 1 | 2 | 3 // 账号类型：1.司机 2.客户 3.技术员 -->
            <!-- 绑定操作：三个账号类型分别对应不同的绑定内容，司机绑定车辆、客户绑定客户信息、技术员绑定站点 -->
            <el-button v-if="row.accountType && row.accountType === 2" type="primary" link size="small" @click="handleBind(row)">
              {{ getBtnText(row.accountType) }}
            </el-button>
            <!-- 切换站点操作只针对技术员，技术员根据当前站点在小程序端查看对应数据； -->
            <el-button v-if="row.accountType === 3" class="no-margin-l" type="primary" link size="small" @click="handleSwitchStation(row)">
              切换站点
            </el-button>
            <el-button type="primary" class="no-margin-l" link size="small" @click="handleEdit(row)">编辑</el-button>
          </template>
        </el-table-column>
        <el-table-column label="真实姓名" width="160" prop="realName" align="center" />
        <el-table-column label="账号类型" width="100" align="center">
          <template #default="{ row }">
            <span v-if="row.accountType === 1">司机</span>
            <span v-else-if="row.accountType === 2">客户</span>
            <span v-else-if="row.accountType === 3">技术员</span>
          </template>
        </el-table-column>
        <el-table-column label="司机是否在线" width="120" align="center">
          <template #default="{ row }">
            <template v-if="row.accountType === 1">
              <span v-if="row.driverIsOnline === 0">否</span>
              <span v-else-if="row.driverIsOnline === 1">是</span>
              <el-switch
                v-model="row.driverIsOnline"
                :active-value="1"
                :inactive-value="0"
                :before-change="() => handleUpdateOnlineClick(row)"
              />
            </template>
          </template>
        </el-table-column>
        <el-table-column label="当前车辆" width="120" prop="onlineCarNumber" align="center" />
        <el-table-column label="搅拌车号" width="120" prop="mixingCarCode" align="center" />
        <el-table-column label="车辆所属站点" width="180" prop="carStationName" align="center" />
        <el-table-column label="电话号码" width="180" prop="phone" align="center" />
        <el-table-column label="绑定客户" width="200" prop="bindingCustomer" align="center" />
        <el-table-column label="技术员当前站点" width="180" prop="currentStationName" align="center" />
        <el-table-column label="启用状态" width="120" align="center">
          <template #default="{ row }">
            <span v-if="row.enableStatus === 0">停用</span>
            <span v-else-if="row.enableStatus === 1">启用</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="180" prop="createTime" align="center" />
      </el-table>
      <Pagination
        v-model:page="queryParams.nowPage"
        v-model:pagesize="queryParams.pageSize"
        :total="total"
        @pagination="handlePaginationChange"
      />
    </el-card>

    <!-- 已绑定列表 -->
    <el-dialog
      v-model="bindDialogVisible"
      :title="'已绑定' + bindTypeText + '信息'"
      destroy-on-close
      :close-on-click-modal="false"
      :close-on-press-escape="true"
    >
      <div class="flex-x-b">
        <el-form-item :label="getPrompt()" style="margin-bottom: 0">
          <el-input v-model="bindListKeyWord" style="width: 180px" class="mr-8" :placeholder="'请输入' + getPrompt()" clearable />
        </el-form-item>

        <div class="flex">
          <el-button type="primary" @click="handleBindAdd">新增</el-button>
        </div>
      </div>
      <div></div>
      <el-table v-loading="bindTableLoading" class="mt-12" height="400" :data="bindTableData" border highlight-current-row>
        <el-table-column align="center" label="操作">
          <template #default="{ row }">
            <el-button type="danger" link size="small" @click="handleBindDelete(row)">删除</el-button>
          </template>
        </el-table-column>
        <template v-if="bindType === 1">
          <el-table-column label="车牌号码" prop="carNumber" align="center" />
          <el-table-column label="搅拌车号" prop="mixingCarCode" align="center" />
          <el-table-column label="核载重量" prop="weightLimit" align="center" />
        </template>
        <template v-else-if="bindType === 2">
          <el-table-column label="客户名称" prop="customerName" align="center" />
          <el-table-column label="客户编号" prop="customerCode" align="center" />
        </template>
        <template v-else-if="bindType === 3">
          <el-table-column label="搅拌站名称" prop="mixingStationName" align="center" />
          <el-table-column label="搅拌站编号" prop="mixingStationNumber" align="center" />
        </template>
      </el-table>

      <template #footer>
        <el-button @click="bindDialogVisible = false">取消</el-button>
      </template>
    </el-dialog>

    <!-- 新增绑定弹框 -->
    <el-dialog
      v-model="bindAddDialogVisible"
      :title="'选择' + bindTypeText"
      destroy-on-close
      :close-on-click-modal="false"
      :close-on-press-escape="true"
    >
      <div class="flex">
        <div class="leading-[32px]">{{ getPrompt() }}</div>
        <div class="flex">
          <el-input
            v-model="bindKeyWord"
            style="width: 180px"
            class="ml-12 mr-8"
            placeholder="请输入"
            clearable
            @keyup.enter="handleBoundQuery"
          />
          <el-button type="primary" @click="handleBoundQuery">
            <template #icon><ep-Search /></template>
            搜索
          </el-button>
        </div>
      </div>
      <el-table v-loading="bindAddTableLoading" :data="bindAddTable" height="400" class="mt-12" border highlight-current-row>
        <el-table-column width="55">
          <template #default="{ row }">
            <el-checkbox v-model="row.checked" @change="val => onBindAddSelected(val, row)" />
          </template>
        </el-table-column>
        <template v-if="bindType === 1">
          <el-table-column label="车牌号码" prop="carNumber" align="center" />
          <el-table-column label="搅拌车号" prop="mixingCarCode" align="center" />
          <el-table-column label="核载重量" prop="weightLimit" align="center" />
        </template>
        <template v-else-if="bindType === 2">
          <el-table-column label="客户名称" prop="name" align="center" />
          <el-table-column label="客户编号" prop="code" align="center" />
        </template>
        <template v-else-if="bindType === 3">
          <el-table-column label="搅拌站名称" prop="name" align="center" />
          <el-table-column label="搅拌站编号" prop="number" align="center" />
        </template>
      </el-table>
      <Pagination
        v-model:page="bindAddPag.nowPage"
        v-model:pagesize="bindAddPag.pageSize"
        :total="bindAddPag.total"
        @pagination="handleBindPagChange"
      />

      <template #footer>
        <el-button @click="bindAddDialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="bindAddLoading" @click="handleBindAddSubmit">确定</el-button>
      </template>
    </el-dialog>

    <!-- 切换搅拌站 -->
    <el-dialog
      v-model="switchStationVisible"
      title="切换搅拌站"
      destroy-on-close
      :close-on-click-modal="false"
      :close-on-press-escape="true"
      width="400"
    >
      <el-form ref="switchStationFormRef" :model="stationForm" :rules="stationFormRules" label-width="100px">
        <el-form-item label="当前搅拌站" prop="mixingStationNumber">
          <el-select v-model="stationForm.mixingStationNumber" placeholder="搅拌站" clearable>
            <el-option v-for="item in stationOptions" :key="item.number" :label="item.name" :value="item.number" />
          </el-select>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="switchStationVisible = false">取消</el-button>
        <el-button type="primary" :loading="switchStationLoading" @click="handleSwitchCommit">确定</el-button>
      </template>
    </el-dialog>

    <!-- 编辑用户信息 -->
    <el-dialog
      v-model="editDialogVisible"
      title="编辑用户信息 "
      destroy-on-close
      width="600"
      :close-on-click-modal="false"
      :close-on-press-escape="true"
    >
      <el-form ref="editFormRef" :model="editForm" :rules="editFormRules" label-width="100px">
        <el-form-item label="电话号码">
          <el-input v-model="editForm.phone" disabled placeholder="电话号码" />
        </el-form-item>
        <el-form-item label="启用类型" prop="enableStatus">
          <el-select v-model="editForm.enableStatus" placeholder="启用类型">
            <el-option label="停用" :value="0" />
            <el-option label="启用" :value="1" />
          </el-select>
        </el-form-item>

        <el-form-item label="真实姓名">
          <el-input v-model="editForm.realName" placeholder="真实姓名" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="editLoading" @click="handleEditCommitClick">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { useTable, useEdit, useSwitchStation, useOnlineUpdate, useBind, useStation } from './index'

const { queryFormRef, queryParams, total, loading, tableData, handleQuery, handlePaginationChange, handleResetQuery } = useTable()

const {
  bindType,
  getBtnText,
  getPrompt,
  handleBind,
  bindDialogVisible,
  bindListKeyWord,
  bindTableLoading,
  bindTableData,
  bindTypeText,
  handleBindDelete,
  bindAddDialogVisible,
  handleBindAdd,
  bindKeyWord,
  bindAddTableLoading,
  bindAddLoading,
  bindAddTable,
  bindAddPag,
  handleBoundQuery,
  handleBindPagChange,
  onBindAddSelected,
  handleBindAddSubmit
} = useBind(handleQuery)

const { handleUpdateOnlineClick } = useOnlineUpdate()

const {
  switchStationVisible,
  switchStationFormRef,
  stationForm,
  stationOptions,
  stationFormRules,
  switchStationLoading,
  handleSwitchStation,
  handleSwitchCommit
} = useSwitchStation(handleQuery)

const { editDialogVisible, editFormRef, editForm, editFormRules, editLoading, handleEdit, handleEditCommitClick } = useEdit(handleQuery)

const { stationList } = useStation(queryParams, handleQuery)
</script>
<style lang="scss" scoped>
.no-margin-l {
  margin-left: 0;
}
</style>
